<!--  -->
<template>
	<div class="lsh-draw-wrapper">
		<DrawBox :mark="mark" v-model:label="nowLabel" :tool-config="config">
			<div class="lsh-canvas" :id="canvasId">
				<div class="lsh-footer-box">
					<div class="lsh-tool-list" v-show="list.length > 1">
						<div class="lsh-tool-item">
							<IconBtn
								name="arrow-left"
								@click="hanChangeImgIndex(false)"
								tip-text="上一张"
								:has-text="false"
								:disabled="imgIndex === 0"
							>
							</IconBtn>
							<span class="page-text"
								>{{ imgIndex + 1 }}/{{ list.length }}</span
							>
							<IconBtn
								name="arrow-right"
								@click="hanChangeImgIndex(true)"
								tip-text="下一张"
								:has-text="false"
								:disabled="imgIndex === list.length - 1"
							>
							</IconBtn>
						</div>
					</div>
					<div class="lsh-tool-list">
						<div class="lsh-tool-item">
							<IconBtn
								name="rotate-left"
								@click="hanRotate(true)"
								tip-text="向左转"
								:has-text="false"
							>
							</IconBtn>
							<IconBtn
								name="draw-hand"
								:active="dragable"
								@click="setDragable(!dragable)"
								tip-text="移动图片"
								:has-text="false"
								:tip-tag-list="toolConfigMap.move.tip"
							>
							</IconBtn>
						</div>
						<div class="lsh-tool-item">
							<IconBtn
								name="scale-shrink"
								@click="hanScale(false)"
								tip-text="缩小"
								:has-text="false"
								:tip-tag-list="toolConfigMap.shrink.tip"
							>
							</IconBtn>
							<span class="scale-text">{{ (scale * 100).toFixed() }}%</span>
							<IconBtn
								:has-text="false"
								name="scale-grow"
								@click="hanScale(true)"
								tip-text="放大"
								:tip-tag-list="toolConfigMap.grow.tip"
							>
							</IconBtn>
						</div>
					</div>
				</div>
			</div>
		</DrawBox>
		<Empty class="lsh-draw-empty" v-show="list.length === 0">
			<template #description>
				<div class="lsh-empty-desc">学生未上传答案</div>
			</template>
		</Empty>
    <a-spin v-show="loading" :size="28" class="lsh-draw-loading" />
		<div class="lsh-label-box">
			<div class="lsh-left">
				<div class="lsh-score-box" :style="{ color: scoreInfo.color }">
					<span class="lsh-score-text">{{ scoreInfo.text }}</span>
					<span>{{ scoreInfo.endText }}</span>
				</div>
				<a-tag
					v-for="item in labelList"
					:key="item.value"
					:class="{
						'lsh-tag': true,
						[item.class]: true
					}"
					v-show="nowLabel === item.value"
					>{{ nowLabel }}</a-tag
				>
			</div>
			<div class="lsh-divider"></div>
			<div class="lsh-right">
				<div class="lsh-title">题目{{ info.topicNumStr }}</div>
				<div class="lsh-total-text">满分{{ info.totalScore }}分</div>
				<div class="lsh-info">
					<a-avatar :size="20">
						<img alt="avatar" :src="info.avatar" />
					</a-avatar>
					<span class="text-ellipsis">{{ info.username }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import IconBtn from '../icon-btn/index.vue'
import { TagTypeEnum } from '@/constants/index'
import { useDrawing } from '../../hooks/useDraw'
import Empty from '@/components/_shared/components/empty/index.vue'
import { ActiveInfo } from '../mark-filter/type'
import { getScoreInfoByTotal } from '../mark-filter/config'
import DrawBox from '@/components/task-review/compoents/draw-box/index.vue'
import Bg from '@/assets/images/bg.png'
const props = defineProps<{
	info: ActiveInfo
	config: {
		setLable: boolean
	}
}>()
const dataList = ref<string[]>([])
const canvasId = 'canvas-draw'
const mark = useDrawing(canvasId)
const {
	historyUtil,
	scale,
	initImg,
	hanScale,
	hanRotate,
	destroy,
	loading,
	dragable,
	setDragable
} = mark
const imgIndex = ref(0)
const list = ref<string[]>([])
//是否有更新
let updatedFlag = false
const hanChangeImgIndex = (isNext: boolean) => {
	const index = isNext ? imgIndex.value + 1 : imgIndex.value - 1
	if (index < 0) return
	if (index > list.value.length - 1) return
	//切换图片,记录是否更新
	if (!updatedFlag) {
		updatedFlag = historyUtil.index.value !== 0
	}
	dataList.value[imgIndex.value] = JSON.stringify(historyUtil.data.value)
	imgIndex.value = index
	setCanvasData()
}

const setCanvasData = async () => {
	console.log('开始加载图片')
	const url = list.value[imgIndex.value]
	const penData = dataList.value[imgIndex.value]
	if (!url) return
	await initImg({
		url,
		penData
	})
	console.log('加载图片完成')
}
const toolConfigMap = {
	shrink: {
		tip: [
			{
				text: '缩小',
				tagList: ['Ctrl-', 'Ctrl+鼠标滚轮']
			}
		]
	},
	grow: {
		tip: [
			{
				text: '放大',
				tagList: ['Ctrl+', 'Ctrl+鼠标滚轮']
			}
		]
	},
	move: {
		tip: [
			{
				text: '移动图片',
				tagList: ['右键拖拽', '空格+左键拖拽']
			}
		]
	}
}
const labelList = [
	{
		color: '#26A555',
		label: '优秀作答',
		value: '优秀作答',
		class: TagTypeEnum.correct
	},
	{
		color: '#ff4c26',
		label: '典型错误',
		value: '典型错误',
		class: TagTypeEnum.error
	}
]
const nowLabel = ref('')
onBeforeUnmount(() => {
	destroy()
})
const scoreInfo = computed(() => {
	return getScoreInfoByTotal(props.info.totalScore, props.info.score)
})
onMounted(() => {
	setCanvasData()
})
defineExpose({
	setData: (data: { imgList: string[]; dataList: string[]; label: string }) => {
		list.value = data.imgList
		dataList.value = data.imgList.map((_, i) => {
			return data.dataList[i] ?? '[]'
		})
		nowLabel.value = data.label
		imgIndex.value = 0
		updatedFlag = false
		setCanvasData()
	},
	getData: () => {
		dataList.value[imgIndex.value] = JSON.stringify(historyUtil.data.value)
		return {
			dataList: dataList.value,
			label: nowLabel.value
		}
	},
	hasChangeMark: () => {
		if (updatedFlag) return true
		return historyUtil.index.value !== 0
	}
})
</script>
<style scoped lang="less">
.lsh-canvas {
	width: 100%;
	flex: 1;
	transform: translateZ(0); /* 强制启用硬件加速 */
	background: #79828f;
	.lsh-footer-box {
		position: absolute;
		z-index: 1;
		bottom: 8px;
		right: 8px;
		width: 100%;
		display: flex;
		justify-content: end;
		align-items: center;
		gap: 4px;
		.lsh-tool-list {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			background: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(8px);
			padding: 4px 8px;
			.lsh-tool-item {
				display: flex;
				align-items: center;
				gap: 8px;
				:deep {
					.lsh-tool-btn {
						width: 28px;
						height: 28px;
						padding: 6px;
						border-radius: 8px;
						&:not(.disabled) {
							.lsh-icon {
								color: #fff;
							}
						}
						&.active {
							background: rgba(69, 143, 255, 0.2);
							.lsh-icon {
								color: rgba(69, 143, 255, 1);
							}
						}
					}
				}
			}
			.scale-text {
				color: #fff;
				text-align: center;
				width: 45px;
			}
			.page-text {
				color: #fff;
				text-align: center;
				width: 24px;
			}
		}
	}
}
.lsh-draw-empty {
	position: absolute;
	z-index: 1;
	top: 0;
	background: #79828f;
	.lsh-empty-desc {
		color: #fff;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
	}
}
.lsh-draw-wrapper {
	position: relative;
	flex: 1;
	height: 100%;
	overflow: hidden;
}
.lsh-label-box {
	min-width: 200px;
	max-width: 268px;
	height: 100px;
	border-radius: 16px;
	border: 1px solid #e1e5eb;
	background: #fff;
	/* 卡片投影 */
	box-shadow: 0px 0px 8px 0px rgba(0, 101, 255, 0.06);
	position: absolute;
	top: 16px;
	right: 22px;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	.lsh-left {
		overflow: hidden;
		padding: 2.5px 0 16px 16px;
		.lsh-score-box {
			color: #26a555;
			font-family: 'PingFang SC';
			font-size: 14px;
			font-weight: 400;
			line-height: 1;
			letter-spacing: -0.14px;
			.lsh-score-text {
				font-size: 50px;
				font-weight: 600;
				letter-spacing: -0.5px;
				line-height: 70px;
			}
		}
		.lsh-tag {
			margin-top: -23.5px;
			width: 64px;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}
	.lsh-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-family: 'PingFang SC';
		line-height: normal;
		font-size: 14px;
		font-weight: 400;
		padding: 16px 16px 16px 0;
		.lsh-title {
			color: #0d1014;
			font-weight: 600;
		}
		.lsh-total-text {
			margin-top: auto;
			color: #79828f;
		}
		.lsh-info {
			margin-top: 8px;
			color: #0d1014;
			display: flex;
			align-items: center;
			gap: 2px;
		}
	}
	.lsh-divider {
		border-left: 1px dashed rgba(225, 229, 235, 1);
		height: 65px;
		width: 0px;
		display: flex;
		margin: 17px 16px 0;
	}
}
.lsh-draw-loading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
	z-index: 2;
	top: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
<style lang="less">
.lsh-menu-box {
	border-radius: 16px;
	border: 1px solid #e1e5eb;
	background: #fff;

	/* 气泡弹窗投影 */
	box-shadow: 0px 0px 20px 0px rgba(85, 124, 167, 0.12);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	.lsh-menu-item {
		border-radius: 4px;
		border: 1px dashed #e1e5eb;
		height: 28px;
		padding: 0 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		user-select: none;
		&.active {
			border: 1px solid #0065ff;
			background: rgba(0, 101, 255, 0.08);
			&::after {
				content: url('@/assets/icons/draw-checked.svg');
				position: absolute;
				bottom: -1px;
				right: -1px;
				width: 14px;
				height: 14px;
				background-color: #0065ff;
				border-bottom-right-radius: 4px;
				border-top-left-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
